<template>
  <div class="mainPad">
    <div class="add p-2">
      <div class="d1 text-white">订单配送至：</div>
      <div class="d2 flex flex-row">
        <div class="t">云南大学呈贡校区楸苑</div>
        <div class="ic" @click="toAddList">
          <img src="../assets/jiantou.png">
        </div>
      </div>
      <div class="d3 text-white">张三先生&nbsp;&nbsp;18748374249</div>
    </div>

    <div class="dian">{{ business.businessName }}</div>

    <div class="bussinessPad">
      <ur class="bussinessList">
        <div class="my-3"></div>
        <li v-for="item in foods" :key='item.foodId' class="businessCard">

          <div v-if="item.amount>0" class="bussinessicon">
            <img class="listimg" :src=item.foodImg>
          </div>

          <div v-if="item.amount>0" class="list1">
            <div class="font-bold my-1.5">{{ item.foodName }}</div>
          </div>

          <div v-if="item.amount>0" class="list2">
            <div class="flex justify-end">

              &nbsp;&nbsp;x &nbsp; {{item.amount}}&nbsp;&nbsp;

            </div>

          </div>
        </li>
      </ur>

      <div class="businessCard">
        <div class="list3">
          <div class="font-bold my-1.5">配送费</div>
        </div>

        <div class="list4">
          <div class="flex justify-end">
            ￥{{business.deliveryPrice}}
          </div>

        </div>

      </div>

    </div>

    <div class="endPad">
      <div class="zongjiao">￥{{ total }}</div>
      <div class="queren" @click = pay>去支付</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import store, {foodStore} from "../store";
import {onBeforeMount, onMounted, onUnmounted} from "vue";
import router from "../router";

function setTitle(){
  store.state.tit="确认订单"
}

function setDom(){
  store.state.showFooter=0
}

function deleteDom(){
  store.state.showFooter=1
}

onBeforeMount(()=>{
  setTitle()
  setDom()
})

onMounted(()=>{

})

onUnmounted(()=>{
  deleteDom()
})

const foodstore = foodStore()

const foods = foodstore.foods
const business = foodstore.businessAndFoods
const total = foodstore.totalPrice

const pay= ()=>{

  router.push('/payment')
}

const toAddList= ()=>{
  router.push('/addressList')
}
</script>

<style scoped>

.add{
  @apply bg-blue-500;
}

.ic{
  width: 20%;
  @apply flex justify-end text-white flex-col text-right text-xl w-5 h-5;
}

.t{
  width: 90%;
  @apply text-xl text-white font-bold;
}

.dian{
  @apply border border-gray-200 border-solid p-2 font-semibold flex flex-row;
}

.businessCard{
  @apply m-1 flex flex-row justify-center content-center items-center;
}

.bussinessPad img{
  width: 30%;
  @apply w-20 h-20 m-2 justify-self-stretch;
}

.bussinessPad .list1{
  width: 50%;
  @apply flex flex-col m-1 text-sm;
}

.bussinessPad .list2{
  width: 20%;
  @apply flex flex-col text-right text-sm;
}

.list3{
  width: 70%;
  @apply flex flex-col m-1 text-sm;
}

.list4{
  width: 23%;
  @apply flex flex-col text-right text-sm;
}


.endPad{
  @apply w-full flex flex-row bottom-0 fixed;
}
.zongjiao{
  width: 70%;
  @apply bg-gray-800 text-white flex justify-center items-center py-4 font-bold text-xl;
}

.queren{
  width: 30%;
  @apply bg-green-500 text-white flex justify-center items-center py-4 font-bold text-xl;
}
</style>